import ReactDOM from "react-dom/client";
import App from "@src/App";
import { Provider } from "react-redux";
import store from "./store";
import { ThunkDispatch } from "redux-thunk";
import { PersistGate } from "redux-persist/integration/react";
import { persistStore } from "redux-persist";
import "bulma/css/bulma.css";
import "@fortawesome/fontawesome-free/css/all.min.css";
import "react-toastify/dist/ReactToastify.css";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

const persistor = persistStore(store);
root.render(
  <Provider store={store}>
    <PersistGate persistor={persistor}>
      <App />
      <ToastContainer position="top-right" autoClose={2000} theme="colored" />
    </PersistGate>
  </Provider>
);
// Redux 状态对象的类型
export type AppState = ReturnType<typeof store.getState>;
// 用于接收 Action 对象的 dispatch 方法的类型
export type AppDispatch = typeof store.dispatch;
// 用于接收 Action 函数的 dispatch 方法的类型
export type AppThunkDispatch = ThunkDispatch<
  AppState,
  any,
  Parameters<AppDispatch>[0]
>;
